<template>
	<view class="login-wrapper">
		<view class="title">账号登陆</view>
		<view class="form-wrapper">
			<view class="form-group">
				<text class="iconfont">&#xe7d8;</text>
				<input class="input" type="text" placeholder-style="font-size: 24rpx;color:#999;" placeholder="请输入会员号" v-model="dataForm.username" />
			</view>
			<view class="form-group">
				<text class="iconfont">&#xe60c;</text>
				<input class="input" type="password" placeholder-style="font-size: 24rpx;color:#999;" placeholder="请输入密码" v-model="dataForm.password" />
			</view>
			<view class="btn-wrapper">
				<button 
				class="btn" 
				type="default" 
				:disabled="submitLoading"
				:loading="submitLoading"
				@click="onSubmit"
				>
				{{submitLoading ? '登录中' : '登录'}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			submitLoading: false,	//登陆禁用状态
			dataForm: {
				username: '',
				password: ''
			}
		};
	},
	
	onHide() {
		clearInterval(this.codeTimer)
	},
	methods:{
		// 提交
		onSubmit () {
			let params = this.dataForm
			if(!params.username) {
				return uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				})
			}
			if(!params.password) {
				return uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
			}
			uni.setStorageSync('access_token', 'www.huolihua.cn')
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
};
</script>

<style lang="scss">
.login-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #ffffff;
	.title{
		padding: 20px;
		font-size: 18px;
		font-weight: bold;
	}
	.form-wrapper {
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -30%);
		width: 90%;
		padding: 20rpx;
		border-radius: 6rpx;
		.form-group {
			position: relative;
			padding: 40rpx 0;
			border-bottom: 1px solid #e1e1e1;
			.iconfont {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
			.input {
				width: 100%;
				padding-left: 50rpx;
			}
			
		}
		.btn-wrapper {
			margin-top: 40rpx;
			.btn {
				text-align: center;
				border-radius: 60rpx;
				background-color: #e6e6e6;
				font-size: 26rpx;
				padding: 6rpx;
				&:active {
					opacity: 0.8;
				}
				&::after{
					border: none;
				}
			}
		}
	}
}
</style>
